import React, { useEffect, useState } from 'react';
import { Spin, Typography, Tabs } from 'antd';
import { BookOutlined, TeamOutlined, GlobalOutlined } from '@ant-design/icons';
import { useTeamStore } from '@/store/useTeamStore';
import NoTeamComponent from './components/NoTeamComponent';
import TeamDisplayComponent from './components/TeamDisplayComponent';
import ProblemSetComponent from './components/ProblemSetComponent';
import styles from './index.module.css';

const { Title } = Typography;

const PracticePage: React.FC = () => {
  const { currentTeam, myTeams, isLoading, fetchMyTeam, leaveTeam, setCurrentTeam } = useTeamStore();
  const [activeTab, setActiveTab] = useState('team');
  const [teamProblemSetCount, setTeamProblemSetCount] = useState<number | null>(null);
  const [publicProblemSetCount, setPublicProblemSetCount] = useState<number | null>(null);

  // 获取用户团队信息
  useEffect(() => {
    fetchMyTeam();
  }, []);

  const handleJoinTeamSuccess = () => {
    // 重新获取用户团队信息
    fetchMyTeam();
  };

  const handleTeamChange = (teamId: number) => {
    const selectedTeam = myTeams.find(team => team.id === teamId);
    if (selectedTeam) {
      setCurrentTeam(selectedTeam);
    }
  };

  const handleLeaveTeam = async () => {
    if (!currentTeam) return;
    
    const success = await leaveTeam(currentTeam.id);
  };

  // 如果正在加载，显示加载状态
  if (isLoading) {
    return (
      <div className={styles.container}>
        <div className={styles.loadingContainer}>
          <Spin size="large" />
          <div className={styles.loading}>正在获取团队信息...</div>
        </div>
      </div>
    );
  }

  // 如果没有团队，显示加入团队界面
  if (myTeams.length === 0) {
    return (
      <div className={styles.container}>
        <NoTeamComponent onJoinSuccess={handleJoinTeamSuccess} />
      </div>
    );
  }

  // 有团队，显示题单列表
  return (
    <div className={styles.container}>
      <TeamDisplayComponent
        currentTeam={currentTeam}
        myTeams={myTeams}
        onTeamChange={handleTeamChange}
        onLeaveTeam={handleLeaveTeam}
        onJoinSuccess={handleJoinTeamSuccess}
      />
      
      <div className={styles.content}>
        <Title level={3}>
          <BookOutlined /> 题单列表
        </Title>
        
        <Tabs
          activeKey={activeTab}
          onChange={setActiveTab}
          items={[
            {
              key: 'team',
              label: (
                <span>
                  <TeamOutlined /> 团队题单 ({teamProblemSetCount ?? '-'})
                </span>
              ),
              children: (
                <ProblemSetComponent 
                  currentTeam={currentTeam} 
                  problemSetType="team"
                  onCountChange={setTeamProblemSetCount}
                />
              ),
            },
            {
              key: 'public',
              label: (
                <span>
                  <GlobalOutlined /> 公开题单 ({publicProblemSetCount ?? '-'})
                </span>
              ),
              children: (
                <ProblemSetComponent 
                  currentTeam={currentTeam} 
                  problemSetType="public"
                  onCountChange={setPublicProblemSetCount}
                />
              ),
            },
          ]}
        />
      </div>
    </div>
  );
};

export default PracticePage; 